<template>
    <div class="p-grid p-fluid">
        <div class="p-col-12 flexbox-demo">

            <!--面包屑-->
            <div style="padding-bottom: 0.95rem;">
                <Breadcrumb :home="home" :model="crumbs"/>
            </div>

            <div class="card">
                <h4>分销等级</h4>
                <p>分销推广等级越高收益越高，当前你的推广等级为：<b>{{user.level_name}}</b>。</p>
                <p>可用余额：<b>{{user.balance}}</b>元</p>
            </div>

            <div class="card">
                <h5>等级说明</h5>
                <div class="p-grid">

                    <div style="padding: 0.4rem;" class="p-col" v-for="(item,index) in lists" :key="index">
                        <Card style="width: 25em">
                            <template slot="header">
                                <img alt="user header" :src="item.icon">
                            </template>
                            <template slot="title">
                                Lv.{{index+1}} {{item.name}}
                            </template>
                            <template slot="subtitle">
                                {{item.title}}
                            </template>
                            <template slot="content">
                                <!--                                -->
                                <div v-html="item.describes"></div>
                            </template>
                            <template slot="footer">
                                <Button @click="buy(item)" v-show="user.level!==item.id" style="display: inherit;"
                                        icon="pi pi-dollar" :label="item.price"/>
                                <Button v-show="user.level===item.id" class="p-button-secondary"
                                        style="display: inherit;" icon="pi pi-check" label="已达成"/>
                            </template>
                        </Card>
                    </div>

                </div>
            </div>

            <Dialog :visible.sync="buyDialog" :style="{width: '450px'}" header="确认" :modal="true">
                <div class="confirmation-content">
                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"/>
                    <span v-if="list">您确认要使用 {{list.price}}元 购买 <b>{{list.name}}</b> 吗？</span>
                </div>
                <template #footer>
                    <Button label="再想想" icon="pi pi-times" class="p-button-text"
                            @click="hideBuyDialog"/>
                    <Button label="是的" icon="pi pi-check" class="p-button-text" @click="buying"/>
                </template>
            </Dialog>

        </div>
    </div>



</template>

<script>
    import TableService from '@/api/TableService';

    export default {
        data() {
            return {
                buyDialog:false,
                lists: null,
                user: null,
                home: {label: '控制台', icon: 'pi pi-home', to: '/'}, //面包屑公共导航
                crumbs: [ //面包屑
                ],
            }
        },
        TableService: null,
        created() {
            this.TableService = new TableService();
            this.getList();

            //获取当前路由名称
            for (let i = 0; i < this.$router.options.routes[1].children.length; i++) {
                if (this.$router.options.routes[1].children[i].path === this.$route.fullPath) {
                    this.crumbs = [
                        {label: '产品管理',},
                        {label: this.$router.options.routes[1].children[i].meta.title},
                    ];
                }
            }

        },
        methods: {
            getList()   //获取等级列表
            {
                this.loading = true;
                this.lists = null;
                this.TableService.get('/user_level/list', {}).then(data => {
                    // console.log('data:'+JSON.stringify(data));
                    if (data === undefined) {
                        this.empty = 'ERROR: 结果返回异常';
                        this.loading = false;
                        return;
                    } else if (typeof (data) === 'object' && data.code !== 20000) {
                        this.empty = 'ERROR: ' + data.msg;
                        this.loading = false;
                        return;
                    }
                    this.lists = data.data.rows;
                    this.user = data.data.user;
                    this.loading = false;
                });
            },
            buy(item)   //购买等级
            {
                this.list = item;
                this.buyDialog = true;
            },
            hideBuyDialog()
            {
                this.buyDialog = false;
                this.list = {};
            },
            buying()
            {
                this.TableService.get('/user_level/buy', this.list).then(data => {
                    if (data === undefined) {
                        return;
                    } else if (typeof (data) === 'object' && data.code !== 20000) {
                        return;
                    }
                    this.hideBuyDialog();
                    this.$toast.add({severity: 'success', summary: '提示', detail: data.msg, life: 3000});
                    setTimeout(function(){
                        location.reload();
                    },1500);
                });
            },
        },
    }
</script>

<style lang="scss">
    .flexgrid-demo {
        .box {
            background-color: var(--surface-e);
            text-align: center;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
        }

        .box-stretched {
            height: 100%;
        }

        .vertical-container {
            margin: 0;
            height: 200px;
            background: var(--surface-d);
            border-radius: 4px;
        }

        .nested-grid .p-col-4 {
            padding-bottom: 1rem;
        }

        .dynamic-box-enter-active, .dynamic-box-leave-active {
            transition: all .5s;
        }

        .dynamic-box-enter, .dynamic-box-leave-to {
            opacity: 0;
        }

        .dynamic-box-enter, .dynamic-box-leave-to {
            transform: translateX(30px);
        }

        p {
            margin: 0;
        }
    }

    .p-col {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .p-card {
        display: inline-block;
    }
</style>
